<?php 
/**
Template Page for the gallery carousel

Follow variables are useable :

	$gallery     : Contain all about the gallery
	$images      : Contain all images, path, title
	$pagination  : Contain the pagination content
	$current     : Contain the selected image
	$prev/$next  : Contain link to the next/previous gallery page
	

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
//print_r($images);
$templatePath = WP_PLUGIN_URL."/nextgen-gallery/view";
$width = 710;
$height = 300;
$descriptionHeight = 100;
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
<link rel="stylesheet" type="text/css" href="<?php echo $templatePath;?>/NRB/css/style6.css" />
<script language="javascript" type="text/javascript" src="<?php echo $templatePath;?>/NRB/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $templatePath;?>/NRB/js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $templatePath;?>/NRB/js/script.js"></script>
<script type="text/javascript">
 $(document).ready( function(){	
		var buttons = { previous:$('#jslidernews3 .button-previous') ,
						next:$('#jslidernews3 .button-next') };
  
		var _complete = function(slider, index){ 
								$('#jslidernews3 .slider-description').animate({height:0});
								slider.find(".slider-description").animate({height:'<?php echo $descriptionHeight;?>'}) 
						};							;
	 	$('#jslidernews3').lofJSidernews( { 
                                                                                                interval : 8000,
												direction		: 'opacity',	
											 	easing			: 'easeInOutSine',
												duration		: 1200,
												auto		 	: true,
												mainWidth               :'<?php echo $width;?>',
                                                                                                buttons			: buttons
												//onComplete:_complete 
                                                                                            } );	
	});
</script>
<style>
    .sliderWidthHeightFix{
        width: <?php echo $width;?>px;
        height:<?php echo $height;?>px;
        border: 1px solid #C4CFD8;
    }
    .lof-slidecontent ul.sliders-wrap-inner li{
        text-align: left;
    }
    .slider-img-max-width{
        max-width: <?php echo $width;?>px;
        max-height:<?php echo $height;?>px;
    }
    .slider-image{
        float: left;
        width: 460px;
        overflow: hidden;
    }
    .my-slider-description{
        float: left;
        width:250px;
        color: #000;
        text-align: left;
    }
    .main-slider-content li{
        list-style: none;
    }
    .main-slider-content{
        background: transparent;
    }
</style>
<div id="jslidernews3" class="lof-slidecontent sliderWidthHeightFix_">
	<div class="preload"><div></div></div>
            
            <div  class="button-previous">Previous</div>
                   
    <!-- MAIN CONTENT --> 
    <div class="main-slider-content sliderWidthHeightFix">
                <ul class="sliders-wrap-inner">
                    <?php $cnt=1; 
	foreach ( $images as $image ) : ?>
	<?php if ( $image->hidden ) continue; ?> 
                    <li>
                        <div class="slider-image">
                            <img class="slider-img-max-width" src="<?php echo $image->url;?>" title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" /> 
                        </div>
                        <div class="my-slider-description">
                            <p style="padding: 10px 5px;"><?php echo $image->description ?></p>
                        </div>
                        <div class="clear"></div>
<!--                          <div class="slider-description">
                              <div class="description-wrapper">
                            <p><?php echo $image->description ?></p>
                         </div>
                          </div>-->
                    </li> 
         <?php $cnt++;endforeach; ?>
      </ul>  	
            </div>
 		   <!-- END MAIN CONTENT --> 
    <div class="button-next">Next</div>
 </div>
<?php endif; ?>